<template>
  <div v-loading="isLoading > 0" class="page-container">
    <page-tools>
      <template #search>
        <el-form size="mini" :inline="true" :model="formData" class="demo-form-inline">
          <el-form-item>
            <el-select v-model="formData.cate_id" placeholder="选择城市">
              <el-option label="全部" value />
              <el-option
                v-for="item in cateList"
                :key="item.id"
                :label="item.cate_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getGoodsList">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #right>
        <el-button type="primary" size="mini" @click="addGoods">新增门店</el-button>
      </template>
    </page-tools>

    <el-card style="margin-top: 10px;">
      <el-table :data="goodsList" border>
        <el-table-column label="序号" type="index" fixed="left" width="60" sortable />
        <el-table-column label="商品名称" prop="goods_name" width="80" />
        <el-table-column label="商品描述" prop="goods_desc" width="80" />
        <el-table-column label="商品图片" width="100">
          <template #default="{ row }">
            <img :src="row.goods_image" alt style="height: 60px;" srcset />
          </template>
        </el-table-column>
        <el-table-column label="额外信息" width="110" sortable>
          <template #default="{ row }">
            <!-- <span @click="lookExtra(row)">查看规格</span> -->
            <router-link :to="'/shop/extra?city_id=' + row.id" class="text-link">查看规格</router-link>
          </template>
        </el-table-column>
        <el-table-column label="价格" prop="price" />
        <el-table-column label="折后价" prop="discount_price" />
        <el-table-column label="排序" prop="sort" width="100" sortable />
        <el-table-column label="是否上线" width="100">
          <template #default="{ row }">
            <el-switch
              :value="row.status === 1"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeStatus(row)"
            />
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="200">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="editCate(row)">编辑</el-button>
            <!-- <el-button type="text" size="small" @click="clickDel(row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <!-- <div style="height: 60px; margin-top: 10px">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>-->
    </el-card>

    <add-edit ref="AddEditDialog" :cate-list="cateList" @refresh="getGoodsList" />
  </div>
</template>

<script>
import { getCateGoodsList } from '@/api/cate'
import { getGoodsList, updateOneGoodsById } from '@/api/goods'
import AddEdit from './components/AddEdit.vue'
import { formatTime } from '@/filters/index'
export default {
  name: 'GoodsList',
  components: {
    AddEdit
  },
  filters: {
    formatTime
  },
  props: {},
  data() {
    return {
      cateList: [],
      formData: {
        cate_id: ''
      },
      isLoading: 0,
      page: 1,
      size: 10,
      total: 0,
      goodsList: []
    }
  },
  computed: {},
  watch: {
    'formData.cate_id'(newVal) {
      // location.hash = '/goods/list' + (newVal ? `?cate_id=${newVal}` : '')
      location.hash = `/goods/list?cate_id=${newVal}`
    }
  },
  created() {
    const { cate_id } = this.$route.query
    this.formData.cate_id = cate_id ? Number.parseInt(cate_id) : ''
    this.getCateGoodsList()
    this.getGoodsList()
  },
  mounted() {},
  methods: {
    async getCateGoodsList() {
      try {
        this.isLoading++
        const res = await getCateGoodsList()
        this.cateList = res
      } finally {
        this.isLoading--
      }
    },
    async getGoodsList() {
      try {
        this.isLoading++
        const res = await getGoodsList(this.formData)
        this.goodsList = res
      } finally {
        this.isLoading--
      }
    },
    getCateName(row) {
      const { cate_name } = this.cateList.find(item => item.id === row.cate_id)
      return cate_name
    },
    // async onSearch() {
    //   const res = await request('admin_getGoodsList', { cate_id: this.formData.cate_id })
    //   this.goodsList = res.list
    //   this.total = res.total
    // },
    changeStatus(row) {
      this.$confirm('确定要进行次操作么？', '温馨提示').then(async() => {
        this.isLoading++
        await updateOneGoodsById({
          id: row.id,
          status: row.status === 1 ? -1 : 1
        })

        await this.getGoodsList()
        this.isLoading--
      }).catch(() => {
        console.log('取消')
      })
    },
    editCate(row) {
      this.$refs.AddEditDialog.open(row)
    },
    addGoods() {
      this.$refs.AddEditDialog.open()
    }
    // clickDel(row) {
    //   this.$confirm('确定要进行次操作么？', '温馨提示').then(async() => {
    //     this.isLoading++
    //     await request('admin_updateGoods', {
    //       goods_id: row.goods_id,
    //       status: -1
    //     })
    //     this.$message.success('删除成功！')

    //     await this.getGoodsList()
    //     this.isLoading--
    //   }).catch(() => {
    //     console.log('取消')
    //   })
    // }
    // indexMethod(index) {
    //   return index + 1 + (this.page - 1) * this.size
    // },
    // handleSizeChange() {},
    // handleCurrentChange() {}
  }
}
</script>

<style lang="scss" scoped>
</style>
